<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增漫画章节 ')" />
    <!--图片预览css-->
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-chapter-add">
        <div class="form-group">

            <label class="col-sm-3 control-label is-required">漫画id：</label>
            <div class="col-sm-8">
            <select class="form-control" name="nameId">

            </select>
            </div>

        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">章节名称：</label>
            <div class="col-sm-8">
                <input name="name" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">章节的顺序：</label>
            <div class="col-sm-8">
                <input name="nameOrder" class="form-control" type="text">
            </div>
        </div>
        <!--  <div class="form-group">
             <label class="col-sm-3 control-label">备注：</label>
             <div class="col-sm-8">
                 <textarea name="remark" class="form-control"></textarea>
             </div>
         </div>
        <div class="form-group">
             <label class="col-sm-3 control-label">删除标志：</label>
             <div class="col-sm-8">
                 <input name="delFlag" class="form-control" type="text">
             </div>
         </div>-->
    </form>
</div>
<th:block th:include="include :: footer" />

<th:block th:include="include :: select2-js" />


<script th:inline="javascript">
    /*篇章表*/
    var prefix = ctx + "manhua/chapter";
    /*漫画表*/
    var prefix_name = ctx + "manhua/name";
    let requiredStr = "不能为为空";
    $("#form-chapter-add").validate({
        rules: {
            nameId: {
                maxlength: 19,
                required: true,
            },
            name: {
                maxlength: 225,
                required: true
            },
            nameOrder: {
                maxlength: 10,
                required: true
            },

        },
        messages: {

            nameId: {
                maxlength: "最多输入20个数字",
                required: requiredStr,
            },
            name: {
                maxlength: "最多输入255个字符.",
                required: requiredStr
            },
            nameOrder: {
                maxlength: "最多输入10个数字.",
                required: requiredStr
            },

        },
        focusCleanup: true
    });


    $(function (){
        nameId();
    })


    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-chapter-add').serialize());
        }
    }

    /*查找所有漫画*/
    let nameId = () => {
        var json ={
            url: prefix_name+"/list",
            type: "post",
            dataType: "json",
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    let data = result.rows;
                    $("select[name='nameId']").append("<option value=\"\">--选择篇章--</option>")
                    for(var i=0,len=data.length;i<len;i++){
                        $("select[name='nameId']").append("<option value="+data[i].id+">"+data[i].name+"</option>")
                    }
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        }

        $.ajax(json);

    }
</script>
</body>
</html>